<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getUsageApi, delUsageApi } from '@/api/usage.js'
import { useHouseAllList } from '../../../hooks/house/index.js'
import { useUsageState } from '../../../hooks/usage.js'
import { usageTable } from '../../../hooks/usage'
import { ElMessage } from 'element-plus'
import addForm from './addForm.vue'
import Table from '../../../components/Table/table'
import Pagination from '../../../components/Pagination/Pagination'
// todo=============================================
const houseList = useHouseAllList()
const stateList = useUsageState()
const addRef = ref()
const ArrowShow = ref(true)
const UsageType = (val) => stateList.find(item => item.value === val).label
// const usagePk = list.parking_space.name.join('')
// ==================================================
// 列表功能
const queryData = reactive({
  current: 1,
  pageSize: 2,
  create_time: '',

})
// 房屋列表
const list = ref([])
// 数据总数
const total = ref()
const initData = async () => {
  let res = await getUsageApi(queryData)
  // console.log(data);
  list.value = res.data.rows
  // console.log(res);
  total.value = res.data.count
}
// todo=============================================
onMounted(() => {
  initData()
})
// 搜索确定
const onSearch = () => {
  queryData.create_time = queryData.create_time !== '' ? queryData.create_time.map(item => +item).join(',') : queryData.create_time
  queryData.current = 1
  initData()
  // console.log(111);
}
// 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 2,
    begin_time: '',
    community_code: '',
    cost: '',
    end_time: '',
    license_plate: '',
    owner: '',
    pk_code: '',
    remark: '',
    tel: '',
    type: '',
  })
  initData()
}
// ----------修改功能--------------------------------
const editRow = (id) => {
  addRef.value.replyData(id);
};
// --------------------删除功能--------------------------------
const delRow = async (id) => {
  let { success, msg } = await delUsageApi(id)
  if (!success) {
    return ElMessage.error(msg)
  }
  ElMessage.success('删除成功')
  if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--
  initData()
}
</script>
<template>
  <div class="app-container">
    <div class="top">
      <span class="h1">车位管理</span><span>用于管理小区里每一个停车位的基本信息</span>
      <el-card style="margin-bottom: 15px;">
        <!-- 搜索区域 -->
        <el-form label-width="20px">
          <el-row>
            <el-col :span="4">
              <el-form-item>
                <span class="demonstration">小区名称</span>
                <el-select v-model="queryData.community_code" placeholder="请输入">
                  <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <span class="demonstration">车位名称</span>
                <el-input v-model="queryData.pk_code" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <span class="demonstration">车辆牌照</span>
                <el-input v-model="queryData.license_plate" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">车主姓名</span>
                <el-input v-model="queryData.owner" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">联系方式</span>
                <el-input v-model="queryData.tel" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-if="ArrowShow" :span="4">
              <el-form-item>
                <span class="demonstration">使用性质</span>
                <el-select v-model="queryData.type" placeholder="请输入">
                  <el-option v-for="item in stateList" :key="item.id" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="ArrowShow" :span="8">
              <el-form-item>
                <span class="demonstration">创建时间</span>
                <el-date-picker v-model="queryData.create_time" type="datetimerange" range-separator="至"
                  start-placeholder="请选择" end-placeholder="请选择" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="block">
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
                <span @click="ArrowShow = !ArrowShow"> 展开<el-icon>
                    <ArrowDown v-if="ArrowShow" />
                    <ArrowUp v-else />
                  </el-icon></span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-card>
      <!-- 抽屉 -->
      <addForm ref="addRef" @update-list="initData" :list="list" />
      <!-- 表格 -->
      <Table :table="usageTable" :tableData="list" @edit="editRow" @del="delRow">
        <template #code="{ row }">
          {{ row.code }}
        </template>
        <template #type="{ row }">
          {{ UsageType(row.type) }}
        </template>
        <template #community.name="{ row }">
          {{ row.community?.name }}
        </template>
        <template #parking_space="{ row }">
          {{ row.parking_space?.name }}
        </template>
        <template #create_time="{ row }">
          {{ new Date(row.create_time).toLocaleString() }}
        </template>
        <template #begin_time="{ row }">
          {{ new Date(row.begin_time).toLocaleString() }}
        </template>
        <template #end_time="{ row }">
          {{ new Date(row.end_time).toLocaleString() }}
        </template>
      </Table>
      <!-- 分页器 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData"></Pagination>
    </el-card>
  </div>
</template>
<style scoped>
.h1 {
  font-size: 18px;
  margin-right: 10px;
  font-weight: 700;
}

.top {
  margin-bottom: 20px;
}

.demonstration {
  display: block;
  color: #606266;
  font-size: 14px;
}

.block {
  padding-top: 30px;

}
</style>